<script setup lang="ts">
import { ref, onMounted } from "vue";
import Player from "xgplayer";
import "xgplayer/dist/index.min.css";
import VuePdfEmbed from "vue-pdf-embed";
import {
  getCoursewareDetails,
  getRequestParams,
  getCourseDetail,
  getCoursewareResourceInfo
} from "@/api/lms/studying";

const courseInfo = ref({
  describe: ""
});
const list = ref([]);

const curCourseware = ref({
  courseware: {
    id: "",
    fileKind: 1
  },
  resourceUri: ""
});

const clickCustome = (item: any) => {
  console.log(item);
  loadResource(item.id);
};

const loadResource = (coursewareId: string) => {
  const courseid = getRequestParams("id");
  getCoursewareResourceInfo(coursewareId, courseid).then(dto => {
    curCourseware.value = dto;
    switch (dto.courseware.fileKind) {
      case 1:
        new Player({
          id: "mse",
          lang: "zh",
          // 默认静音
          volume: 0,
          autoplay: true,
          screenShot: true,
          videoAttributes: {
            crossOrigin: "anonymous"
          },
          url: dto.resourceUri,
          // poster: dto.resourceUri,
          fluid: true,
          //传入倍速可选数组
          playbackRate: [0.5, 0.75, 1, 1.5, 2]
        });
        break;
      case 3:
        pdfSource.value = dto.resourceUri;
        break;
    }
  });
};
///////////////文档类文件 //////////////
const pdfRef = ref<any>();
const pageCount = ref(1);
const loading = ref(true);
const currentPage = ref(2);
const currentRotation = ref(0);
const showAllPages = ref(false);
const rotations = [0, 90, 180, 270];
const pdfSource = ref("");

const handleDocumentRender = () => {
  loading.value = false;
  pageCount.value = pdfRef.value.doc.numPages;
};

const showAllPagesChange = () => {
  currentPage.value = showAllPages.value ? null : 1;
};
onMounted(async () => {
  const id = getRequestParams("id");
  getCoursewareDetails(id).then(res => {
    list.value = res;
    curCourseware.value.courseware = list.value[0];
    loadResource(curCourseware.value.courseware.id);
  });
  getCourseDetail(id).then(res => {
    courseInfo.value = res;
  });
});
</script>

<template>
  <div class="main">
    <el-card class="h-full min-h-[800px] bg-bg_color overflow-auto">
      <el-row>
        <el-col :span="19">
          <div
            class="video-div"
            v-show="curCourseware.courseware.fileKind == 1"
          >
            <div id="mse" shadow="never" style="width: 100%" />
          </div>
          <div class="doc-div" v-show="curCourseware.courseware.fileKind == 3">
            <el-card shadow="never">
              <div v-loading="loading" class="h-[calc(100vh)]">
                <div class="flex justify-between items-center h-9">
                  <div v-if="showAllPages" class="font-medium ml-1.25 text-xl">
                    共{{ pageCount }}页
                  </div>
                  <div v-else>
                    <el-pagination
                      v-model:current-page="currentPage"
                      background
                      layout="prev, slot, next"
                      :page-size="1"
                      :total="pageCount"
                    >
                      {{ currentPage }} / {{ pageCount }}
                    </el-pagination>
                  </div>
                  <div class="w-[170px] flex-bc">
                    <el-checkbox
                      v-model="showAllPages"
                      @change="showAllPagesChange"
                    >
                      显示所有页面
                    </el-checkbox>
                  </div>
                </div>
                <el-scrollbar>
                  <vue-pdf-embed
                    ref="pdfRef"
                    class="h-full container overflow-auto"
                    :rotation="rotations[currentRotation]"
                    :page="currentPage"
                    :source="pdfSource"
                    @rendered="handleDocumentRender"
                  />
                </el-scrollbar>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="5" style="padding-left: 10px">
          <div style="width: 100%; height: 250px; background-color: #c9ccd0">
            <div style="width: 100%; height: 60px">
              <span>课程简介</span> <br />
              <span>{{ courseInfo.describe }}</span>
            </div>
            <el-divider />
            <ol>
              <li
                @click="clickCustome(item)"
                v-for="item in list"
                :key="item.id"
                style="margin-left: 5px; margin-right: 5px"
              >
                <el-link type="primary" :underline="false">{{
                  item.name
                }}</el-link>
                <span style="float: inline-end">07:00</span>
              </li>
            </ol>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<style scoped></style>
